<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
  </head>

  <body>
    <canvas id="myCanvas" width="600" height="300">
      <p>您的浏览器不支持 canvas!</p>
    </canvas>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jcanvas/dist/jcanvas.js"></script>
    <script>
      var $myCanvas = $('#myCanvas')

      $myCanvas.drawLine({
        strokeStyle: 'steelblue',
        strokeWidth: 10,
        /**
         * @brief: 设置直线连接处为圆角
         * @param: {Boolean} rounded
         * true: 圆角；
         * false(def): 尖角；
         * @tip: {*} >3个点时才有效
         * */
        // rounded: false,

        /**
         * @brief: 关闭路径
         * @param: {Boolean} closed
         * true: 关闭路径点；
         * false(def): 默认不自动关闭路径点；
         * @tip: {*} >3个点时才有效
         * */
        // closed: false,

        /**
         * @brief: 设置箭头属性
         * @param: {Boolean} startArrow 是否启用 起始点箭头；
         * @param: {Boolean} endArrow 是否启用 终结点箭头；
         * @param: {Number} arrowRadius 设置箭头尺寸；（以点为圆心）
         * @param: {Number} arrowAngle 设置箭头角度；
         * @tip: {*} 此处属性为配合使用
         * */
        // closed: false,
        startArrow: true,
        endArrow: true,
        arrowRadius: 40,
        arrowAngle: 90,

        // 对应直线的点
        x1: 100,
        y1: 28,
        x2: 50,
        y2: 200,
        x3: 300,
        y3: 200,
        // x4: 200, y4: 60
      })
    </script>
  </body>
</html>
